<template>
	<div class="Tabs">
		<ul>
			<li>
				<h3>主题游</h3>
				<label>个性独特</label>
			</li>
			<li><h3>亲子游</h3></li>
			<li><h3>摄影游</h3></li>
			<li><h3>户外游</h3></li>
			<li><h3>活动赛事</h3></li>
			<li><h3>瑜伽行</h3></li>
			<li><h3>野奢邦</h3></li>
			<li><h3>定制游</h3></li>
			<li><h3>签证</h3></li>
			<li><h3>邮轮</h3></li>
			<li><h3>美宿度假</h3></li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Tabs'
	}
</script>

<style scoped>
	.Tabs{
		width: 100%;
	}
	.Tabs ul{
		width: 100%;
	}
	.Tabs ul li{
		float: left;
		width: 24%;
		text-align: center;
		line-height: 1.3rem;
		background-size: cover;
		margin: 0.01rem;
	}
	.Tabs ul li h3{
		font-size: 0.35rem;
		font-weight: bold;
	}
	.Tabs ul li label{
		font-size: 0.25rem;
		font-weight: bold;
		background-color: gold;
		border-radius: 0.15rem;
		padding: 0.08rem;
		
	}
	.Tabs ul li:first-child{
		background-image: url(../../../assets/img/Tabs/Tab1.png);
		margin-left: 0.2rem;
	}
	.Tabs ul li:nth-child(2){
		background-image: url(../../../assets/img/Tabs/Tab2.png);
	}
	.Tabs ul li:nth-child(3){
		background-image: url(../../../assets/img/Tabs/Tab3.png);
	}
	.Tabs ul li:nth-child(4){
		background-image: url(../../../assets/img/Tabs/Tab4.png);
	}
	.Tabs ul li:nth-child(5){
		background-image: url(../../../assets/img/Tabs/Tab5png.png);
	}
	.Tabs ul li:nth-child(6){
		background-image: url(../../../assets/img/Tabs/Tab6.png);
	}
	.Tabs ul li:nth-child(7){
		background-image: url(../../../assets/img/Tabs/Tab7.png);
	}
	.Tabs ul li:nth-child(8){
		background-image: url(../../../assets/img/Tabs/Tab8.png);
		margin-left: 0.2rem;
	}
	.Tabs ul li:nth-child(9){
		background-image: url(../../../assets/img/Tabs/Tab9.png);
	}
	.Tabs ul li:nth-child(10){
		background-image: url(../../../assets/img/Tabs/Tab10.png);
	}
	.Tabs ul li:nth-child(11){
		background-image: url(../../../assets/img/Tabs/Tab11.png);
	}
</style>
